<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>我是App组件</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>职业：{{ job.type }}</h2>
  <h2>薪资：{{ job.salary }}</h2>
  <h3>爱好：{{ hobby }}</h3>
  <button @click="sayHello">说话</button>
  <br />

  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}</h2>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
  <br />
  <button @click="changeInfo">问询</button>

  <test-child-vue
    @showCityName="updateCity"
    :sendData="toCity"
  ></test-child-vue>

  <span>姓： <input type="text" v-model="renwu.firstName" /></span>
  <br />
  <span>名：<input type="text" v-model="renwu.lastName" /></span>
  <br />
  <span>全名： {{ renwu.fullName }}</span>
  <br />
  <span>全名： <input type="text" v-model="renwu.fullName" /></span>
</template>

<script>
// import { h } from "vue";
// reactive源对象，专门用来接收一个对象或者数组，返回一个代理对象（proxy对象）
import testChildVue from "./components/testChild.vue";
import { ref, reactive, toRefs, computed, watch } from "vue";

export default {
  name: "App",
  components: {
    testChildVue,
  },
  setup() {
    //监测ref所定义的多个响应式数据
    // watch([sum,msg],(newValue,oldValue)=>{
    //     console.log('sum或msg变了',newValue,oldValue)
    // },{immediate:true})

    /**
     * 监视reactive所定义的一个响应式数据
     * 1.注意：此处无法正确的获取oldValue
     * 2.注意：强制开启了深度监视(deep配置无效)
     */
    // watch(
    //   person,
    //   (newValue, oldValue) => {
    //     console.log("person变化了", newValue, oldValue);
    //   },
    //   { deep: false }  //此处的deep配置无效
    // );

    // 监视reactive所定义的一个响应式数据中的某个属性
    // watch(
    //   () => person.age,
    //   (newValue, oldValue) => {
    //     console.log("person.age变化了", newValue, oldValue);
    //   }
    // );

    // 监视reactive所定义的一个响应式数据中的某些属性
    // watch([() => person.name, () => person.age], (newValue, oldValue) => {
    //   console.log("person.age或name变化了", newValue, oldValue);
    // });

    // 特殊情况
    // watch(
    //   () => person.job,
    //   (newValue, oldValue) => {
    //     console.log("person.job变化了", newValue, oldValue);
    //   },
    //   { deep: true } //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效
    // );

    let renwu = reactive({
      firstName: "张",
      lastName: "三",
    });

    // computed的简写形式——只考虑读，不能修改
    // renwu.fullName = computed(() => {
    //   return renwu.firstName + "-" + renwu.lastName;
    // });
    // computed的完整写法——考虑读写
    renwu.fullName = computed({
      get() {
        return renwu.firstName + "-" + renwu.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        renwu.firstName = nameArr[0];
        renwu.lastName = nameArr[1];
      },
    });

    const state = reactive({ toCity: "北京" });

    const updateCity = (data) => {
      state.toCity = data.cityname;
      console.log("toCity:" + state.toCity);
    };
    let name = ref("张三");
    let age = ref(18);
    let job = reactive({
      type: "前端工程师",
      salary: "30K",
      a: {
        b: {
          c: 666,
        },
      },
    });
    let hobby = reactive(["抽烟", "喝酒", "烫头"]);

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 11000,
        },
      },
    });

    function sayHello() {
      alert(`我叫${name.value},我${age.value}岁了，你好啊！`);
    }

    function changeInfo() {
      //   name.value = "李四";
      //   age.value = 48;
      console.log(job);
      job.type = "UI设计师";
      job.salary = "60K";
      hobby[0] = "学习";
    }

    // 返回方式1：返回一个对象
    return {
      ...toRefs(state),
      renwu,
      name,
      age,
      job,
      hobby,
      person,
      sayHello,
      changeInfo,
      updateCity,
    };

    //返回方式2：返回一个函数（渲染函数）
    // return () => {
    //   return h("h1", "尚硅谷");
    // };
  },
};
</script>

<style>
</style>
